/**
 * 图片懒加载
 * @param {*} 接收图片地址 
 */

// 解析：通过IntersectionObserver API 监听元素是否在页面可视区域内来进行展示

const imgLoad = (imgUrl) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = imgUrl;
    img.onload = () => {
      // setTimeout(() => resolve(), Math.random() * 2000); // 模拟随机2s内的加载时间
      resolve();
    };
    img.onerror = () => {
      reject();
    };
  });
};

// 可直接组件内导入使用 v-imgLazy 或者全局注册
export const vImgLazy = {
  mounted(el, binding) {
    // 创建观察者
    var observer = new IntersectionObserver(([IntersectionObserverEntry]) => {
      // 当元素进入窗口可视范围或者离开可视范围时，监听观察者会触发此回调函数 可以通过isIntersecting属性来判断
      if (IntersectionObserverEntry.isIntersecting) {
        observer.unobserve(el); // 停止观察
        observer.disconnect(); // 销毁观察者
        imgLoad(binding.value).then(resolve => {
          observer = null; // 销毁
          el.src = binding.value;
        }).catch(() => console.log('图片加载失败'))
      }
    })
    // 页面挂载后，开启观察
    observer.observe(el)
  },
}

// 图片懒加载指令
const imgLazy = (app) => {
  // 注册插件
  app.directive('imglazy', vImgLazy)
}

export const install = app => { imgLazy(app) }